<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Cropper Upload</title>
    <link rel="stylesheet" href="../../assets/libs/bootstrap/dist/css/bootstrap.min.css">
    <link href="../../dist/css/style.css" rel="stylesheet">
    <link href="../../dist/css/dylmin.css" rel="stylesheet">
    <link rel="stylesheet" href="../../dist/lib/tagsinput/jquery.tagsinput.css">
    <style>

        div.tagsinput{
            border: none;
        }

        div.tagsinput input{
            padding: 0px;
            margin: 0px;
        }

        div.tagsinput span.tag{
            padding: 1px 5px;
            margin: 0px;
            margin-right: 5px;
        }

        div.form-control.tag{
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="proModalTitle">创建程序</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <input type="hidden" id="id" name="id">
                        <div class="form-group row">
                            <label class="col-sm-2 control-label text-right col-form-label">文件</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input type="file" class="hide" multiple id="file">
                                    <div class="form-control tag">
                                        <input type="text" id="fileTag" placeholder="上传文件">
                                    </div>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-info" id="open" data-title="创建程序">
                                            <i class="mdi mdi-import"></i> 选择
                                        </button>
                                    </div>

                                    <button type="button" class="btn btn-warning ml-1" id="upload" data-title="创建程序">
                                        <i class="mdi mdi-cloud-upload"></i> 上传
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 control-label text-right col-form-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" name="name" placeholder="名称">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="path" class="col-sm-2 control-label text-right col-form-label">路径</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="path" name="path" placeholder="路径">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="args" class="col-sm-2 control-label text-right col-form-label">参数</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="args" id="args" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="savePro">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../dist/lib/tagsinput/jquery.tagsinput.js"></script>
<script>
    $(function () {
        var $modal = $('#modal');
        $modal.modal('show');

        $('#fileTag').tagsInput({defaultText: '',width: 'auto', height: 35});
        $('#fileTag_tag').attr("readonly",true);

        $('#open').on('click', function () {
            $('#file').click();
        });
        var fileArray = new Array();
        $('#file').on('change', function () {
            var temp = $.extend(true, {}, this.files);
            for (var i = 0; i < temp.length; i++){
                var t = temp[i];
                fileArray.push(t);
            }

            var name = '';
            for (var i = 0; i < fileArray.length; i++){
                var f = fileArray[i];
                name += f.name + ',';
            }
            $('#fileTag').importTags(name);
        });
    });
</script>
</body>
</html>
